<template>
	<view class="bbsinfo" :style="'padding-bottom:'+ pageSafeArea +'rpx;'">
		<!-- <view class="groupactiveinfo_head_video_box display_flex" v-if="info.video_url">
			<video class="groupactiveinfo_head_video" :src="videoUrl+info.video_url" :controls="true" object-fit='cover'
				:poster="info.cover?picUrl+info.cover:''">
			</video>
		</view> -->
		<view class="groupactiveinfo_head_img_box" v-if="info.pic">
			<image class="groupactiveinfo_head_img" :src="picUrl+info.pic" mode="aspectFill">
			</image>
		</view>
		<view class="bbs_user_info_box">
			<view class="bbs_user_info">
				<view v-if="info.user.avatar_border" class="bbs_user_avatar_box">
					<image class="avater_img"
						:src="info.user.headimg_url?picUrl+info.user.headimg_url:onlinePic+'avatar.png'"></image>
					<image class="bbs_avatar_border" :src="picUrl+info.user.avatar_border"></image>
				</view>
				<view v-else class="bbs_user_avatar_boxd">
					<image class="avater_imgd"
						:src="info.user.headimg_url?picUrl+info.user.headimg_url:onlinePic+'avatar.png'"></image>
				</view>
				<view class="ml-10 flex-1 display_flex">
					<view class="f-15 ellipsis">{{info.user.username}}</view>
					<view class="ml-5">
						<image v-for="items in info.user.honors" :key='items.honor_id' class="honors_img"
							:src="items.pic"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="info.time_format" class="f-12 c-999999 ml-15">{{info.time_format}} | {{info.show_num}}浏览</view>
		<view class="pd-30">
			<view class="groupactiveinfo_title">{{info.title}}</view>
			<view class="groupactiveinfo_content_cell">
				<view class="mt-10">
					<rich-text class="rich_text" :nodes="info.content"></rich-text>
					<!-- <mp-html class="rich_text" :content="info.content" /> -->
				</view>
				<image v-for="(itemi,index) in info.image" :key="itemi" @click="previewImage(index)"
					class="groupactiveinfo_content_img" :src="picUrl+itemi" mode="widthFix"
					:show-menu-by-longpress="true">
				</image>
			</view>
		</view>
		<view style="border-top: 1rpx solid #E9E9E9;margin: 30rpx;"></view>
		<view class="f-14 c-666666" style="padding: 30rpx;" id="commentId">最新评论</view>
		<view class="bbsinfo_comment_cell_box">
			<view v-for="(item,index) in commentlist" :key="item.comment_id" class="bbsinfo_comment_cell">
				<view class="display_flex">
					<view v-if="item.user.avatar_border" class="comment_avater_box">
						<image class="comment_avater_img"
							:src="item.user.avatar?picUrl+item.user.avatar:onlinePic+'avatar.png'"></image>
						<image class="bbs_comment_avatar_border" :src="picUrl+item.user.avatar_border"></image>
					</view>
					<view v-else class="comment_avater_boxd">
						<image class="comment_avater_imgd"
							:src="item.user.avatar?picUrl+item.user.avatar:onlinePic+'avatar.png'"></image>
					</view>
					<view class="flex-1 ml-10 display_flex">
						<view class="f-14 ellipsis">{{item.user.username}}</view>
						<view v-if="item.user.honors" class="ml-5">
							<image v-for="items in item.user.honors" :key='items.honor_id' class="honors_img"
								:src="items.pic"></image>
						</view>
					</view>
					<!-- <view class="c-999999 ml-10 f-12">斯巴鲁车主</view> -->
					<view class="display_flex" @click="changeCommentPraise(item.comment_id,item.is_praise,index)">
						<view class="c-666666 f-12">{{item.praise_num}}</view>
						<image v-if="item.is_praise==0" class="zan_icon ml-10" :src="onlinePic+'bbs_zan.png'">
						</image>
						<image v-if="item.is_praise==1" class="zan_icon ml-10" :src="onlinePic+'zan_on.png'">
						</image>
					</view>
				</view>
				<view style="margin-left: 120rpx;">
					<view class="f-14 mt-10">
						<text>{{item.content}}</text>
					</view>
					<view class="display_flex f-10 mt-10">
						<view class="c-999999">{{item.create_time}}</view>
						<view class="c-666666" style="padding: 0 20rpx;" @click="goCommentUser(item.comment_id)">回复
						</view>
					</view>

					<view v-if="item.replys" class="bbsinfo_comment_reply_box">
						<view v-if="item.showAllReply==1">
							<view class="mb-10" v-for="(itemr,indexr) in item.replys" :key="itemr.comment_id">
								<span class="f-12">{{itemr.user.username}}</span>
								<span class="f-12" style="margin: 0 6rpx;" v-if="itemr.reuser"> 回复 </span>
								<span class="f-12 c-666666" v-if="itemr.reuser">{{itemr.reuser.username}}</span>
								<span class="f-12 c-666666">：</span>
								<span class="f-12">{{itemr.content}}</span>
								<span class="f-10 c-999999 ml-5">{{itemr.create_time}}</span>
								<span class="f-10 c-999999 ml-5" @click="goCommentUser(itemr.comment_id)">回复</span>
							</view>
							<view class="f-10 c-999999" style="text-decoration: underline;"
								@click="chengeShowAllReply(index,item.showAllReply)">-收起回复</view>
						</view>
						<view v-if="item.showAllReply==2">
							<view class="mb-10" v-for="(itemr,indexr) in item.replys" :key="itemr.comment_id"
								v-if="indexr<3">
								<span class="f-12">{{itemr.user.username}}</span>
								<span class="f-12" style="margin: 0 6rpx;" v-if="itemr.reuser"> 回复 </span>
								<span class="f-12 c-666666" v-if="itemr.reuser">{{itemr.reuser.username}}</span>
								<span class="f-12 c-666666">：</span>
								<span class="f-12">{{itemr.content}}</span>
								<span class="f-10 c-999999 ml-5">{{itemr.create_time}}</span>
								<span class="f-10 c-999999 ml-5" @click="goCommentUser(itemr.comment_id)">回复</span>
							</view>
							<view v-if="item.replys.length>3" class="f-10 c-999999" style="text-decoration: underline;"
								@click="chengeShowAllReply(index,item.showAllReply)">+展开回复</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="loadingTitle" class="page_bottom_loading" style="padding-bottom:50rpx;">{{loadingTitle}}</view>
		</view>
		<view class="bbsinfo_bottom_box" :style="'padding-bottom:'+bottomSafeArea+'rpx;'">
			<view class="display_flex">
				<view class="bbsinfo_bottom_input_box" @click="goCommentBbs()">
					<image class="edit_icon" :src="onlinePic+'edit_icon.png'"></image>
					<view class="bbsinfo_bottom_input">写下评论...</view>
				</view>
				<view class="flex-1 ml-15">
					<uni-row>
						<uni-col :span="8">
							<view class="display_flex" style="justify-content: center;" @click="scrollComm">
								<image class="bbs_comm_icon" :src="onlinePic+'bbs_comm.png'"></image>
								<view class="f-12 ml-5">{{info.comment_num}}</view>
							</view>
						</uni-col>
						<uni-col :span="8">
							<view class="display_flex" style="justify-content: center;" @click="changeCardPraise()">
								<image v-if="info.is_praise==0" class="bbs_zan_icon" :src="onlinePic+'bbs_zan.png'">
								</image>
								<image v-if="info.is_praise==1" class="bbs_zan_icon" :src="onlinePic+'zan_on.png'">
								</image>
								<view class="f-12 ml-5">{{info.praise_num}}</view>
							</view>

						</uni-col>
						<uni-col :span="8">
							<button @click="addShareNum" open-type="share" class="share_btn display_flex"
								style="justify-content: center;">
								<image class="bbs_share_icon" :src="onlinePic+'bbs_share.png'"></image>
								<view class="f-12 ml-5">{{info.share_num}}</view>
							</button>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="rgba(0,0,0,0)" :is-mask-click="true" :safe-area="false">
			<view class="share_bottom_popup">
				<image class="share_img" :src="onlinePic+'share_pop.png'" mode="widthFix"></image>
				<view class="share_btn_box">
					<view class="text-c" @click="addShareNum(1)">
						<image class="share_btn_icon" :src="onlinePic+'wechat_circle.png'"></image>
						<view class="c-666666 f-12 mt-10">朋友圈</view>
					</view>
					<view class="text-c" @click="addShareNum(2)">
						<button open-type="share" class="share_btn">
							<image class="share_btn_icon" :src="onlinePic+'wechat.png'"></image>
							<view class="c-666666 f-12 mt-10">微信好友</view>
						</button>
					</view>
				</view>
				<view class="share_bottom_close_popup" @click="colsePopup"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getClubBbsInfo,
		getClubBbsCommentList,
		changeCommentPraise,
		changeCardPraise,
		addShareNum,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				card_id: '',
				user_id: 0,
				info: {},
				params: {
					card_id: '',
					user_id: 0,
				},
				commentlist: [],
				content: '',
				loadingTitle: '',
				picUrl: app.globalData.picUrl,
				videoUrl: app.globalData.videoUrl,
				onlinePic: app.globalData.onlinePic,
				pageSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom + 110 : 120,
				bottomSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom : 20
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
				this.params.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
				this.userinfo = uni.getStorageSync('userinfo')
				this.getClubBbsInfo()
				this.params.page = 1
				this.commentlist = []
				this.getClubBbsCommentList()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
			this.params.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
			this.card_id = options.card_id ? options.card_id : ''
			this.card_index = options.card_index ? options.card_index : ''
			this.params.card_id = options.card_id ? options.card_id : ''
			this.isComment = options.isComment ? options.isComment : ''
			this.getClubBbsInfo()
			this.getClubBbsCommentList()
		},
		methods: {
			getClubBbsInfo() {
				getClubBbsInfo({
					card_id: this.card_id,
					user_id: this.user_id
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						var params = {
							event_code: '帖子详情',
							path: 'pages/bbs/bbsinfo',
							event_id: this.card_id,
							title: res.data.info.title,
							source_page: '',
							value: '',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getClubBbsCommentList() {
				getClubBbsCommentList(this.params).then(res => {
					if (res.state == 1) {
						var arr = [...this.commentlist, ...res.data.data]
						arr.forEach(function(item, index) {
							item.showAllReply = 2
						});
						this.commentlist = arr
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						if (this.commentlist.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
						if (this.isComment == 1) {
							setTimeout(function() {
								const targetElement = uni.createSelectorQuery().select('#commentId');
								targetElement.boundingClientRect(rect => {
									if (rect) {
										var windowHeight = uni.getSystemInfoSync().windowHeight -
											68
										if (rect.top > windowHeight) {
											uni.pageScrollTo({
												scrollTop: rect.top,
												duration: 300 // 滚动过渡时间（单位ms）
											});
										}
									} else {
										console.log('未找到目标元素！');
									}
								}).exec();
							}, 1000)
						}

					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			chengeShowAllReply(index, type) {
				this.commentlist[index].showAllReply = type == 1 ? 2 : 1
			},
			goCommentBbs() {
				if (uni.getStorageSync('access_token')) {
					uni.navigateTo({
						url: '/pages/bbs/bbscommentpost?card_id=' + this.card_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				var params = {
					event_code: '帖子详情',
					path: 'pages/bbs/bbsinfo',
					event_id: this.info.user_id,
					title: this.info.title,
					source_page: '帖子详情-去评论',
					value: '',
				}
				app.BurialPoint(params)

			},
			goCommentUser(id) {
				if (uni.getStorageSync('access_token')) {
					uni.navigateTo({
						url: '/pages/bbs/bbscommentpost?card_id=' + this.card_id + '&rid=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				var params = {
					event_code: '帖子详情',
					path: 'pages/bbs/bbsinfo',
					event_id: this.info.user_id,
					title: this.info.title,
					source_page: '帖子详情-去评论',
					value: '',
				}
				app.BurialPoint(params)
			},
			//帖子点赞
			changeCardPraise() {
				if (uni.getStorageSync('access_token')) {
					changeCardPraise({
						card_id: this.card_id,
						type: this.info.is_praise == 1 ? 0 : 1
					}).then(res => {
						if (res.state == 1) {
							this.info.praise_num = this.info.is_praise == 1 ? this.info.praise_num - 1 : this.info
								.praise_num + 1
							this.info.is_praise = this.info.is_praise == 1 ? 0 : 1
							var praiseinfo = {
								card_index: this.card_index,
								praise_num: this.info.praise_num,
								is_praise: this.info.is_praise
							}
							uni.setStorage({
								key: 'praiseinfo',
								data: praiseinfo
							})
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
					var params = {
						event_code: '帖子详情',
						path: 'pages/bbs/bbsinfo',
						event_id: this.info.user_id,
						title: this.info.title,
						source_page: '帖子详情-点赞/取消赞',
						value: '',
					}
					app.BurialPoint(params)
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			changeCommentPraise(id, type, index) {
				if (uni.getStorageSync('access_token')) {
					changeCommentPraise({
						comment_id: id,
						type: type == 1 ? 0 : 1
					}).then(res => {
						if (res.state == 1) {
							this.commentlist[index].praise_num = type == 1 ? this.commentlist[index].praise_num -
								1 :
								this.commentlist[index]
								.praise_num + 1
							this.commentlist[index].is_praise = type == 1 ? 0 : 1
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
					var params = {
						event_code: '帖子详情',
						path: 'pages/bbs/bbsinfo',
						event_id: this.info.user_id,
						title: this.info.title,
						source_page: '帖子详情-评论点赞/取消赞',
						value: '',
					}
					app.BurialPoint(params)
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			showSharePoupBox() {
				if (uni.getStorageSync('access_token')) {
					this.$refs.popup.open()
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			addShareNum(type) {
				if (type == 1) {
					uni.showToast({
						title: '敬请期待',
						mask: true,
						icon: 'none',
						duration: 1500
					})
				} else {
					addShareNum({
						card_id: this.card_id
					}).then(res => {
						if (res.state == 1) {
							this.$refs.popup.close()
							this.info.share_num = this.info.share_num + 1
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
				}

			},
			colsePopup() {
				this.$refs.popup.close()
			},
			previewImage(index) {
				var that = this
				var urllist = []
				var list = that.info.image
				list.forEach(function(item, index) {
					item = that.picUrl + item
					urllist.push(item)
				});
				uni.previewImage({
					current: index,
					urls: urllist
				});
			},
			//滚动到评论区
			scrollComm() {
				const targetElement = uni.createSelectorQuery().select('#commentId');
				targetElement.boundingClientRect(rect => {
					if (rect) {
						var windowHeight = uni.getSystemInfoSync().windowHeight - 68
						if (rect.top > windowHeight) {
							uni.pageScrollTo({
								scrollTop: rect.top,
								duration: 300 // 滚动过渡时间（单位ms）
							});
						}
					} else {
						console.log('未找到目标元素！');
					}
				}).exec();
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.commentlist = []
			this.getClubBbsInfo()
			this.getClubBbsCommentList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page < this.last_page) {
				this.showLoading = true
				this.params.page = this.params.page + 1
				this.getClubBbsCommentList()
			} else {
				this.showLoading = false
				if (this.commentlist.length > 0) {
					this.loadingTitle = "- 暂无更多 -"
				} else {
					this.loadingTitle = "- 暂无更多 -"
				}

			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title,
				imageUrl: this.info.cover ? this.picUrl + this.info.cover : this.picUrl + this.info.image[0],
				path: '/pages/bbs/bbsinfo?card_id=' + this.card_id + '&invitees_scene=' + this.user_id
			}
		}
	}
</script>

<style lang="scss">
	.bbsinfo {

		.groupactiveinfo_head_img_box {
			width: 100%;
			height: 50vw;

			.groupactiveinfo_head_img {
				width: 100%;
				height: 50vw;
				vertical-align: middle;
			}


		}

		.groupactiveinfo_head_video_box {
			width: 100%;
			height: 56vw;

			.groupactiveinfo_head_video {
				width: 100%;
				height: 56vw;
			}
		}


		.bbs_user_info_box {
			padding: 30rpx;

			.bbs_user_info {
				display: flex;
				align-items: center;

				.bbs_user_avatar_box {
					width: 110rpx;
					height: 110rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-radius: 100%;

					.avater_img {
						width: 95rpx;
						height: 95rpx;
						border-radius: 100%;
					}

					.bbs_avatar_border {
						width: 110rpx;
						height: 110rpx;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						z-index: 1;
					}

					.avater_v_icon {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: 10rpx;
						bottom: 0;
						z-index: 1;
					}
				}

				.bbs_user_avatar_boxd {
					width: 110rpx;
					height: 110rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-radius: 100%;

					.avater_imgd {
						width: 110rpx;
						height: 110rpx;
						border-radius: 100%;
					}
				}

				.follow_img {
					width: 95rpx;
					height: 45rpx;
					vertical-align: middle;
				}
			}
		}

		.groupactiveinfo_title {
			font-size: 36rpx;
			line-height: 50rpx;
		}

		.groupactiveinfo_content_cell {
			font-size: 28rpx;

			.groupactiveinfo_content_img {
				width: 100%;
				vertical-align: middle;
				border-radius: 8rpx;
				margin-top: 20rpx;
			}

			.groupactiveinfo_content_text {
				color: #000000;
				margin-top: 20rpx;
				line-height: 48rpx;
			}

			.rich_text {
				color: #000000;
				line-height: 2;

				img {
					width: 100% !important;
				}
			}
		}

		.bbsinfo_text {
			font-size: 24rpx;
			line-height: 40rpx;
			margin-top: 20rpx;
		}

		.bbsinfo_praise_user_img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 100%;
			margin-left: -20rpx;
		}

		.previous_bbs_box {
			padding: 30rpx;

			.previous_bbs_img {
				width: 255rpx;
				height: 180rpx;
				border-radius: 8rpx;
				vertical-align: middle;
			}
		}

		.bbsinfo_comment_cell_box {
			padding: 30rpx;

			.bbsinfo_comment_cell {
				margin-bottom: 40rpx;

				.comment_avater_boxd {
					width: 95rpx;
					height: 95rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-radius: 100%;

					.comment_avater_imgd {
						width: 95rpx;
						height: 95rpx;
						border-radius: 100%;
					}
				}

				.comment_avater_box {
					width: 95rpx;
					height: 95rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-radius: 100%;

					.comment_avater_img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
					}

					.bbs_comment_avatar_border {
						width: 95rpx;
						height: 95rpx;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						z-index: 1;
					}
				}

				.zan_icon {
					width: 30rpx;
					height: 26rpx;
					vertical-align: middle;
				}

				.bbsinfo_comment_reply_box {
					margin-top: 30rpx;
					padding: 20rpx;
					border-radius: 8rpx;
					background-color: #F7F7F7;
				}

			}
		}
	}
</style>